<template>
  <div>
    <h3>{{ count }}</h3>
    <button @click="addCount">++++++</button>
    <hr />
    <input type="text" v-model="title" />
  </div>
</template>

<script>
// 自定义一个ref对象
import { ref, customRef } from 'vue'
import useDebouncedRef from './hooks/useDebounce'

const myRef = (n) => {
  // track中数据获取时触发，用来收集依赖
  // trigger如果有修改，则通过更新
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return n
      },
      set(value) {
        n = value
        console.log('hello')
        trigger()
      }
    }
  })
}

export default {
  setup() {
    const count = myRef(100)
    const title = useDebouncedRef('')

    const addCount = () => {
      count.value++
    }

    return {
      count,
      title,
      addCount
    }
  }
}
</script>

<style lang="scss"></style>
